<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="/common/template :: header(~{::title},~{::link},~{::style})"></head>
<style>
	.setmaealInput{
		width: 80%!important;
	}

	.input-group {
		position: relative;
		display: table;
		border-collapse: separate;
		width: 100%;
	}
	.input-group .form-control, .input-group-addon {
		display: table-cell;
	}
	.input-group-addon {
		padding: 5px;
		text-align: center;
		background-color: #eee;
		border-radius: 2px;
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
	}
	.input-group .form-control:first-child{
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
	}
</style>
<script type="text/javascript" src="/js/wangEditor.js"></script>
<body>
	<form class="layui-form setmaealInput" action="" lay-filter="service-add-form" style="margin-top: 20px;">
		<!--  -->
 		<!--  -->
		<div class="layui-form-item">
			<label class="layui-form-label">服务名称：</label>
			<div class="layui-input-block">
				<input id="serviceName" name="serviceName" placeholder="请输入服务名称"
					class="layui-input" lay-verify="required" autocomplete="off">
			</div>
		</div>
 		<!--  -->
		<div class="layui-form-item">
			<label class="layui-form-label">服务类型：</label>
			<div class="layui-input-inline">
				<select id="serviceTypeId" name="serviceTypeId" lay-filter="serviceTypeId"   lay-verify="required">
					<option value=""></option>
					<option th:each="item : ${typeList}" th:value="${item.serviceTypeId}" th:text="${item.serviceTypeName }">
				</select>
			</div>
		</div>
 		<!--  -->
		<div class="layui-form-item">
			<label class="layui-form-label">价格：</label>
			<div class="layui-input-inline input-group">
				<input id="price" name="price" placeholder="请输入价格"
					class="layui-input form-control" type="number" lay-verify="number" autocomplete="off">
				<span class="input-group-addon">元</span>
			</div>

		</div>
 		<!--  -->
		<div class="layui-form-item">
			<label class="layui-form-label">积分：</label>
			<div class="layui-input-inline">
				<input id="integral" name="integral" placeholder="请输入积分"
					class="layui-input" type="number" lay-verify="number" autocomplete="off">
			</div>
		</div>
		<!--  -->
		<div class="layui-form-item">
			<label class="layui-form-label">服务数量：</label>
			<div class="layui-input-inline">
				<input id="serviceCount" name="serviceCount" placeholder="数量-1为无限"
					   class="layui-input" type="number" lay-verify="number" autocomplete="off">
			</div>
		</div>
 		<!--  -->
		<div class="layui-form-item">
			<label class="layui-form-label">是否预约：</label>
			<div class="layui-input-block">
				<input type="radio" name="isReservation" value="1" title="是">
				<input type="radio" name="isReservation" value="0" title="否" checked>
			</div>
		</div>
		<!--  -->
		<div class="layui-form-item">
			<label class="layui-form-label">服务内容：</label>
			<div class="layui-input-block">
				<div id="serviceContent"></div>
			</div>
		</div>
 		<!--  -->
		<div class="layui-form-item">
			<label class="layui-form-label">购买须知：</label>
			<div class="layui-input-block">
				<div id="purchaseNotes"></div>
			</div>
		</div>
 		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn" lay-submit="" lay-filter="service-add">立即提交</button>
			</div>
		</div>
	</form>
	<script th:replace="/common/template :: script"></script>
	<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
	<script>
		layui.use([ 'layer', 'jquery', 'form', 'laydate' ], function() {
			var $ = layui.jquery;
			var laydate = layui.laydate;
			var layer = layui.layer;
			var form = layui.form;

			//富文本编辑器
			const E = window.wangEditor
			const editor1 = new E('#serviceContent')
			editor1.config.width = 200
			// 或者 const editor = new E(document.getElementById('div1'))
			// 配置 server 接口地址
			editor1.config.uploadImgServer = '/editorUploadImg'
			editor1.create()
			const editor2 = new E('#purchaseNotes')
			editor2.config.width = 200
			// 或者 const editor = new E(document.getElementById('div1'))
			// 配置 server 接口地址
			editor2.config.uploadImgServer = '/editorUploadImg'
			editor2.create()

			//日期时间选择器
           			//监听提交
			form.on('submit(service-add)', function(data) {
				//提交数据
				var serviceContent = editor1.txt.html();
				var purchaseNotes = editor2.txt.html();
				data.field.serviceContent = serviceContent;
				data.field.purchaseNotes = purchaseNotes;
				data.field.serviceType = $("#serviceTypeId option:selected").text();
				data.field.serviceTypeId = $("#serviceTypeId").val();
				CoreUtil.ajaxPostLoad("/service/setmeal/save", data.field,true,parent.active);
				return false;
			});
		});
	</script>
</body>
</html>